import React, { useEffect, useState } from 'react'
// import { ArrowLeftOutlined } from '@ant-design/icons'
import { useNavigate, useLocation } from 'react-router-dom'
import { routeMapText } from '~/routes/config'
import { Row, Col } from 'antd'
import { TextTitle } from './styled'

const TopHeader = ({ headData, isHideTitle }: any) => {
  const navigate = useNavigate()
  const [title, setTitle] = useState('')
  const location = useLocation()
  useEffect(() => {
    for (const [key] of routeMapText) {
      if (key.includes(location.pathname)) {
        setTitle(routeMapText.get(key))
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <header>
      {!isHideTitle && (
        <div
          style={{ marginBottom: 12, cursor: 'pointer' }}
          onClick={() => {
            navigate(-1)
          }}
        >
          {/* <ArrowLeftOutlined style={{ fontSize: 14, color: '#000000' }} /> */}
          <TextTitle>
            {title} - {headData[0]?.childen[1]?.value}
          </TextTitle>
        </div>
      )}
      {headData.map((item: any, index: any) => (
        <Row style={{ marginTop: 10 }} key={index}>
          {item.childen.map((subItem: any, subIndex: number): any => (
            <Col style={{ marginLeft: 10 }} span={11} key={subIndex}>
              <label style={{ fontSize: 14, color: '#8c8c8c' }}>{subItem.label}</label>
              <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{subItem.value}</span>
            </Col>
          ))}
        </Row>
      ))}
    </header>
  )
}

const ListTitle = ({ title = '物品列表' }: any) => {
  return <TextTitle style={{ marginTop: 24, display: 'inline-block' }}>{title}</TextTitle>
}

export default TopHeader
export { ListTitle }
